<!--
 * @Author: your name
 * @Date: 2021-08-25 15:20:24
 * @LastEditTime: 2021-08-29 20:02:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \宏烨找房\client-applet\src\views\map\map.vue
-->
<template>
  <div class="map">
    <div class="header">
      <van-icon name="arrow-left" @click="gomap" />
      <span>地图找房</span>
      <span></span>
    </div>
    <div class="main">
      <div class="baidumap" id="allmap"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bmap",
  components: {},
  mounted() {
    this.baiduMap();
  },
  methods: {
    gomap() {
      this.$router.go(-1);
    },
    baiduMap() {
      var BMap = "";
      var map = new BMap.Map("allmap");

      var point = new BMap.Point(115.043096, 38.592132); // 创建点坐标
      map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      //map.setMapStyle({ style: 'midnight' }) //地图风格

      var marker = new window.BMap.Marker(point); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中

      //提示信息
      var infoWindow = new BMap.InfoWindow("这是提示信息");
      // 鼠标移上标注点要发生的事
      marker.addEventListener("mouseover", function() {
        this.openInfoWindow(infoWindow);
      });

      // 鼠标移开标注点要发生的事
      marker.addEventListener("mouseout", function() {
        //this.closeInfoWindow(infoWindow)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    font-size: 18px;
    background: #f6f5f6;
  }
  .main {
    width: 100%;
    flex: 1;
  }
}
.baidumap {
  width: 1000px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
  display: none !important;
}
.baidumap > .anchorBL {
  display: none !important;
}
</style>
